<template>
  <div class="main-contain">
    <div class="carousel-contain">
      <el-carousel type="card" height="400px" trigger="hover" >
        <el-carousel-item v-for="item in picses" :key="item">
          <el-image :src=item.url
                    :fit="'fill'" v-on:click="clickImage"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="service-contain">
      <div class="customer-service">
        <el-card class="service-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-user-solid"></i>
              <span>患者服务</span>
            </div>
          </template>
          <div class="service-card-body">
            <service-template v-for="item in services" :icon-type="item.iconType" :service-name="item.serviceName" :service-desc="item.serviceDesc" :url="item.url" class="service"></service-template>
          </div>
        </el-card>
      </div>
      <div class="doctor-service">
        <el-card class="service-card">
          <template #header>
            <div class="card-header">
              <i class="el-icon-s-custom"></i>
              <span>今日名医</span>
            </div>
          </template>
          <div class="card-body">
            <doctor-template v-for="item in doctors" :doctor="item"></doctor-template>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

import serviceTemplate from '../../components/ServiceTemplate.vue'
import doctorTemplate from '../../components/DoctorCardTemplate.vue'
import {getHotDoctor} from "../../api/api";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "Index",
  mounted() {

    getHotDoctor({},{})
    .then(res=>{
      if (res.ret === 0){
        this.doctors = res.data
      }
      else{
        ElMessage.warning({
          type:"warning",
          message: '获取失败'
        })
      }
    })
    .catch(err=>{
      console.log(err)
      ElMessage.error({
        type:"error",
        message: '系统错误'
      })
    })
  },
  components:{serviceTemplate,doctorTemplate},
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },

  data(){
    return{

      services:{
        emergency:{
          iconType: 'el-icon-phone-outline',
          serviceName: '紧急电话',
          serviceDesc: '医院常用联系紧急电话，救助电话',
          url:'/index/emergency',
        },
        guide:{
          iconType: 'el-icon-map-location',
          serviceName:'就诊指南',
          serviceDesc:'挂号就诊指导说明和须知说明',
          url:'/index/guide',
        },
        order:{
          iconType:'el-icon-s-order',
          serviceName:'预约挂号',
          serviceDesc:'预约挂号医院医生接受治疗',
          url:'/index/appoint',
        },
        recipe:{
          iconType:'el-icon-message-solid',
          serviceName:'就诊进度',
          serviceDesc:'实时查看您的就诊进度',
          url:'/index/progress',
        },
        pay:{
          iconType:'el-icon-s-finance',
          serviceName:'账单',
          serviceDesc:'查看所有种类的账单记录',
          url:'/index/bill',
        },
        history:{
          iconType:'el-icon-reading',
          serviceName:'诊断记录',
          serviceDesc:'查看在医院的所有诊断记录',
          url:'/index/orderHistory',
        }
      },
      doctors:[],
      picses:[
        {url:'/index/pics1.png'},
        {url: '/index/pics2.png'},
        {url:'/index/pics3.png'},
        {url:'/index/pics4.png'},
      ],
    }
  },
  methods:{


    showIt: function (){
      console.log(this.loginCardShow)
    },

    /*
    * 走马灯的点击事件，暂无实现
    * */
    clickImage(){

    },
    clickLogo(){
      this.$router.push('/index/home')
    },

  }
}
</script>

<style scoped>
.main-contain{
  position: relative;
  width: 100%;
  height: 100%;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header span{
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.15em;
}


.carousel-contain{
  padding-top: 30px;
}
.service-card{
  width: 650px;
  height: auto;
}

.service-contain{
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}
.carousel-contain{
  background-color: rgba(229, 231, 233 ,0.8);
}

.service-card-body{
  display: flex;
  flex-flow: wrap;
}


.card-body{
  width: 600px;
  height: auto ;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  margin-left: 10px;
}

.logoutBtn{
  width: 100px;
  height: 30px;
  background: red;
}
</style>